/***
 * desc:三方平台的顺丰快递支持选择业务类型
 * 
 * 
 */
import { useState, useEffect } from 'react'
import { Form, Select, message } from 'antd';
import CommonModal from '@/components/CommonModal'
import CommonLoading from '@/components/CommonLoading';
import { layout4 } from '@/utils/config';
import { getSfPruductListOp, commonSuppleUserCodeOp } from '../service';

const { Option } = Select

 const AddSFModal = ({ record, handleOk, handleCancel }) => {
  const [form] = Form.useForm();

  const [loading, setLoading] = useState(false);//loading
  const [productList, setList] = useState([]);

  useEffect(()=>{
    getSfPruductList();
  },[])

  useEffect(()=>{
    if(productList.length && record.extend){
      const { expressTypeId, expressTypeName } = JSON.parse(record.extend);
      expressTypeId && form.setFieldsValue({
       productType: expressTypeId + '@' +  expressTypeName
     })
    }
  },[productList])

  // 获取顺丰时效产品
  const getSfPruductList = async () => {
    setLoading(true) 
    const { success, data = [] } = await getSfPruductListOp();
    if (success && data) {
      setList(data)
    }
    setLoading(false)
  }

  const onOk = () => {
    form.validateFields().then( async val=>{
      setLoading(true);
      const arr = val.productType.split('@');
      let res = await commonSuppleUserCodeOp({
        id: record.id,
        expressTypeId: arr[0],
        expressTypeName: arr[1]
      })
      const { success, msg } = res
      if(success){
        message.success(msg);
        handleOk();
        handleCancel();
      }
      setLoading(false);
    })
  }
  
  return (
    <CommonModal
       title='补充业务类型'
       visible={true}
       onOk={onOk}
       onCancel={handleCancel}
       width='456px'
       minHeight='158px'
    >
      <Form form={form} name='supplement-user-code-form' {...layout4}>

      <Form.Item
           label="业务类型"
           name="productType"
           rules={[{ required: true, message: '请先选择业务类型' }]}
         >
           <Select
             showSearch
             placeholder="请选择业务类型"
             optionFilterProp='children'
             allowClear={true}
           >
             {productList.map(d => <Option key={`${d.typeId}@${d.remark}`} >{d.remark}</Option>)}
           </Select>
         </Form.Item>

      </Form>
      <CommonLoading loading={loading} />
    </CommonModal>
  )
}

export default AddSFModal